<template>
	<div id="home" :closeWZA="isCloseWZA()">
	
		<div class="navigation">
			<myheader @searchDel="searchDel"></myheader>
			<navs></navs> 
			<search @searchDel="searchDel" v-if="isSearch"></search>
		</div>
		<div class="content">
			<bg></bg>
			<videos></videos>
		</div>

		<contact></contact>
		<information></information>
		<backtop @goTop='goTop'></backtop>
	</div>
</template>

<script>
	import { defineAsyncComponent } from 'vue';
	export default {
		components: {
			myheader:defineAsyncComponent(() => import(rootPath+'/src/components/header/header.vue')),
			navs:defineAsyncComponent(() => import(rootPath+'/src/components/header/nav.vue')),
			search:defineAsyncComponent(() => import(rootPath+'/src/components/header/search.vue')),
			bg:defineAsyncComponent(() => import(rootPath+'/src/components/video/bg.vue')),
			videos:defineAsyncComponent(() => import(rootPath+'/src/components/video/videos.vue')),
			contact:defineAsyncComponent(() => import(rootPath+'/src/components/footer/contact.vue')),
			information:defineAsyncComponent(() => import(rootPath+'/src/components/footer/information.vue')),
			backtop:defineAsyncComponent(() => import(rootPath+'/src/components/footer/backtop.vue')),
		},
		data() {
			return {
				isSearch: false,
				query:GetQueryString(),
			}
		},
		mounted(){
			SEO(this.query);
		},
		methods: {
			goTop() {
				let ele = document.querySelector('#app');
				this.scrollToTop(ele);
			},
			// *滚动条回到顶部**/
			scrollToTop(el) {
				const cubic = (value) => Math.pow(value, 3);
				const easeInOutCubic = (value) => value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2;
				if (!el) return
				const beginTime = Date.now()
				const beginValue = el.scrollTop;
				const frameFunc = () => {
					if (!el) return
					const progress = (Date.now() - beginTime) / 500;
					if (progress < 1) {
						el.scrollTop = beginValue * (1 - easeInOutCubic(progress))

						requestAnimationFrame(frameFunc)
					} else {
						el.scrollTop = 0
					}
				}
				requestAnimationFrame(frameFunc)
			},
			searchDel(val) {
				this.isSearch = val
			},
			isCloseWZA() {
				return localStorage.getItem('close') || false;
			}
		},
	}
</script>

<style scoped>
#home {
  height: fit-content;
  overflow: auto;
}
#home .navigation {
  width: 100%;
}
#home .content {
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#home .content .contentLeft {
  width: 1200px;
  margin-top: 48px;
  display: flex;
}
#home .hotspot {
  margin-left: 40px;
}

</style>
<style>
	.mhover:hover {
			color: #Ff3333 !important;
			cursor: pointer;
	}
</style>